<template>
    <section class="area_about">
    	<p class="top_tab">
  				<el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">
				  <el-tab-pane
				    v-for="(item, index) in editableTabs2"
				    :key="item.name"
				    :label="item.title"
				    :name="item.name"
				  > </el-tab-pane>
				</el-tabs>
        </p>
        
         			<area-gaishu v-if="editableTabsValue2=='1'"></area-gaishu>
				    <area-detail v-if="editableTabsValue2==='2'"></area-detail>		
				    <share-server v-if="editableTabsValue2==='3'"></share-server>
				    <collect-server v-if="editableTabsValue2==='4'"></collect-server>	
    </section>
</template>

<script>
    import areaDetail from "./components/areaDetail"
    import shareServer from "./components/shareServer"
    import collectServer from "./components/collectServer"
    import areaGaishu from "./components/areaGaishu"
    export default {
    	components:{
    		areaDetail,
    		shareServer,
    		collectServer,
    		areaGaishu
    	},
        data() {
               return {
			        editableTabsValue2: '1',
			        editableTabs2: [
				        {
				          title: '区域概述',
				          name: '1',
				        }, 
				       	{
				          title: '区域详情',
				          name: '2',
				        }, 
				        {
				          title: '共享服务',
				          name: '3',
				        }, 
				        {
				          title: '采集服务',
				          name: '4',
				        }, 
			        ],
			        tabIndex:1,
			        
			    }
        },
        methods: {
		      addTab(targetName) {
		        let newTabName = ++this.tabIndex + '';
		        this.editableTabs2.push({
		          title: 'New Tab',
		          name: newTabName,
		          content: 'New Tab content'
		        });
		        this.editableTabsValue2 = newTabName;
		      },
		      removeTab(targetName) {
		        let tabs = this.editableTabs2;
		        let activeName = this.editableTabsValue2;
		        if (activeName === targetName) {
		          tabs.forEach((tab, index) => {
		            if (tab.name === targetName) {
		              let nextTab = tabs[index + 1] || tabs[index - 1];
		              if (nextTab) {
		                activeName = nextTab.name;
		              }
		            }
		          });
		        }
		        this.editableTabsValue2 = activeName;
		        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
		      }
		},
		mounted(){
		}
  };
</script>



<style >
    .area_about{
    	padding: 12px;
    	background: #F0F0F0;
    	overflow-y: scroll;
    	height: 100%;
    }
    .area_about .top_tab{
    	background: #fff;
    	border-radius: 6px;
    }
    .area_about .el-tabs__header{
    	margin:unset
    }
</style>